<template>
    <div class="contain">
      <el-carousel  class="siwpers" height="30rem">
          <el-carousel-item v-for="item in swiperList" :key="item.id">
              <div class="siwpers-img">
                  <img class="siwper-items" :src="item.img" alt="">
              </div>
          </el-carousel-item>
      </el-carousel>
      <!-- 列表  -->
      <div class="article">
           <div v-for="item in recoveryList" :key="item.id" class="article-box">
               <img :src="item.headImg" alt="#" class="article-img">
               <div class="detail-box">
                <div class="names"><span>{{ item.name }}</span><span  class="detail-name1">{{ item.domain }}</span></div>
                <div class="msgs"><div class="msgs-title">擅长：</div><div v-html="item.introduce" class="msgcontent"></div></div>
              </div>
           </div>
           <div class="pagination"><el-pagination v-if="total>0" background layout="prev, pager, next" v-model:current-page="info.page" :page-size="info.size" :total="total" @current-change="handleCurrentChange" /></div>
          </div>
       </div>
  </template>
  <script setup>
  import {getBannerList,findExpertPage} from '../../util/api.js'
  const info=ref({
      page:1,
      pageNum:4
  })
  const recoveryList = ref([])
  const route = useRoute()
  const swiperList =ref([])
  const getBannerLists = async()=>{
              let res= await getBannerList({type:route.meta.title})
              if(res.code!=200)return
              swiperList.value=res.data
   }
  const total = ref(0)
  const handleCurrentChange = (val)=>{
      info.value.page = val
      getrecoveryList()
  }
  const getrecoveryList = async()=>{
      let res = await findExpertPage(info.value)
      console.log(res)
      if(res.code!=200)return
      recoveryList.value = res.data.content
      total.value = res.total
  }
  onMounted(()=>{
      getBannerLists()
      getrecoveryList()
  })
  </script>
  <style lang="scss" scoped>
  .contain{
      width:100%;
      .siwpers{
          width: 100%;
          height: 480px;
          :deep(.el-carousel__arrow--left){
                  width: 60px;
                  height: 60px;
                  left: 80px;
                  border: 1px solid #ffffff;
                  font-weight: 500;
                  font-size: 16px;
                  color: #ffffff;
                  background: none;
                  }
  
                  //右箭头
          :deep(.el-carousel__arrow--right){
          width: 60px;
          height: 60px;
          right: 80px;
          border: 1px solid #ffffff;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          background: none;
          }
          .siwpers-img{
              width: 100%;
              height: 480px;
              background-size: 100% 100%;
              position: relative; 
              .siwper-items{
                  width: 100%;
                  height: 100%;
              }         
          }
      } 
      .article{
          width: 100%;
          box-sizing: border-box;
          padding: 0 150px;
          background-color: #F8F8F8;
          display: flex;
          // justify-content: space-between;
          flex-wrap: wrap;
          padding: 100px 150px;
          position: relative;
          .pagination{
              display: inline-block;
              position: absolute;
              right: 148px;
              bottom: 100px;
              :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
                  background-color: #009966;   // 进行修改未选中背景和字体
                  color: #FFFFFF;
              }
              :deep(.el-pagination.is-background .el-pager li:not(.disabled)) {
                 background-color: #fff;        /* 进行修改未选中背景和字体 */
                 color: #31312E;
                 border: 1px solid rgba(0,0,0,0.15);
              }
              :deep(.el-pagination.is-background .btn-prev){
                  background-color: #FFFFFF;
                  border-radius: 2px;
                  border: 1px solid rgba(0,0,0,0.15);
              }
              :deep(.el-pagination.is-background .btn-next){
                  background-color: #FFFFFF;
                  border-radius: 2px;
                  border: 1px solid rgba(0,0,0,0.15);
              }
          }
          .myPagination{
              display: none;
          }
          .article-box{
              width: 715px;
              height: 280px;
              padding: 10px;
              background-color: #FFFFFF;
              box-shadow: 0px 0px 16px 2px rgba(0,0,0,0.08);
              display: flex;
              gap: 10px;
              margin-bottom: 64px;
              margin-right: 2%;
              .article-img{
                  display: block;
                  width: 224px;
                  height: 100%;
              }
              .detail-box{
                      flex: 1;
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      font-weight: 500;
                      font-size: 22px;
                      color: #1F1F1F;
                      .names{
                        font-size: 28px;
                        font-weight: 600;
                        color: #303030;
                        display: flex;
                        align-items: flex-end;
                        border-bottom: 1px solid rgba(0,0,0,0.12);
                        padding: 40px 0;
                        .detail-name1{
                            font-size: 22px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #009966; 
                            margin-left: 20px;
                        }
                      }
                      .msgs{
                        width: 100%;
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        overflow: hidden;
                        overflow-y: auto;
                        .msgs-title{
                            height: 60px;
                            width: 100%;
                            font-size: 20px;
                            font-weight: 500;
                            color: #1F1F1F;
                            margin: 10px 0;
                        }
                      }
             }
          }
      } 
  }
  </style>